<template>
  <div
    class="img-container"
    :style="{ width: imgInfo.width + 'px', height: imgInfo.height + 'px' }"
  ></div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { FAKE_DATA } from "./fake";

// vue3导入图片
const ocrImg = new URL("@/assets/use.png", import.meta.url).href;
// 图片宽高
const imgInfo = reactive({
  width: 0,
  height: 0,
});
// 创建img对象
const img = new Image();
// 图片加载完成后
img.onload = () => {
  // 设置div的宽高
  imgInfo.width = img.width;
  imgInfo.height = img.height;
  // 根据OCR数据绘制边框
  FAKE_DATA.Response.DocumentRecognizeInfo[0].Elements.forEach((item) => {
    const el = document.createElement("div");
    el.style.position = "absolute";
    const { LeftBottom, LeftTop, RightBottom, RightTop } = item.Polygon;
    el.style.left = LeftTop.X + "px";
    el.style.top = LeftTop.Y + "px";
    el.style.width = RightTop.X - LeftTop.X + 15 + "px";
    el.style.height = RightBottom.Y - RightTop.Y + "px";
    // el.style.border='1px solid red'
    el.style.flexGrow = 1;
    el.style.fontSize =
      item.Type === "title"
        ? RightBottom.Y - RightTop.Y + "px"
        : RightBottom.Y - RightTop.Y - 10 + "px";
    el.style.lineHeight =LeftBottom.Y - LeftTop.Y + "px";
    el.innerText = item.Text;
    el.style.color = "rgba(255,255,255,0)";
    el.style.textAlign = "center";
    document.querySelector(".img-container").appendChild(el);
  });
};
// 图片加载地址
img.src = ocrImg;
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.img-container {
  background-image: url("@/assets/use.png");
  background-size: 100% 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
